
<link href="/js/kindeditor-4.1.10/themes/default/default.css" type="text/css" rel="stylesheet">
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/kindeditor-all-min.js"></script>
<script type="text/javascript" charset="utf-8" src="/js/kindeditor-4.1.10/lang/zh_CN.js"></script>
<div style="padding:10px 10px 10px 10px">
	<form id="itemAddForm" class="itemForm" method="post">
	    <table cellpadding="5">
	        <tr>
	            <td>商品类目:</td>
	            <td>
	            	<a href="javascript:void(0)" class="easyui-linkbutton selectItemCat">选择类目</a>
	            	<input type="hidden" name="cid" style="width: 280px;"></input>
	            </td>
	        </tr>
	        <tr>
	            <td>商品标题:</td>
	            <td><input class="easyui-textbox" type="text" name="title" data-options="required:true" style="width: 280px;"></input></td>
	        </tr>
	        <tr>
	            <td>商品卖点:</td>
	            <td><input class="easyui-textbox" name="sellPoint" data-options="multiline:true,validType:'length[0,150]'" style="height:60px;width: 280px;"></input></td>
	        </tr>
	        <tr>
	            <td>商品价格:</td>
	            <td><input class="easyui-numberbox" type="text" name="priceView" data-options="min:1,max:99999999,precision:2,required:true" />
	            	<input type="hidden" name="price"/>
	            </td>
	        </tr>
	        <tr>
	            <td>库存数量:</td>
	            <td><input class="easyui-numberbox" type="text" name="num" data-options="min:1,max:99999999,precision:0,required:true" /></td>
	        </tr>
	        <tr>
	            <td>条形码:</td>
	            <td>
	                <input class="easyui-textbox" type="text" name="barcode" data-options="validType:'length[1,30]'" />
	            </td>
	        </tr>
	        <tr>
	            <td>商品图片:</td>
	            <td>
	            	 <a href="javascript:void(0)" class="easyui-linkbutton stFileupload" id="uploadPicBtn">上传图片</a>
	                 <input type="hidden" name="image" id="image"/>
	            </td>
	        </tr>
	        <tr>
	            <td>商品描述:</td>
	            <td>
					<textarea style="width:800px;height:300px;" name="desc" id="desc"></textarea>
	            </td>
	        </tr>
	        <tr class="params hide">
	        	<td>商品规格:</td>
	        	<td>
	        		
	        	</td>
	        </tr>
	    </table>
<!--	    <input type="hidden" name="itemParams"/>-->
	</form>
	<div style="padding:5px">
	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="submitForm()">提交</a>
	    <a href="javascript:void(0)" class="easyui-linkbutton" onclick="clearForm()">重置</a>
	</div>
</div>
<!-- 上传图片的弹窗 -->
<div id="fileUploadWin"  title="上传图片" style="visibility:hidden;"
	 data-options="iconCls:'icon-save',modal:true">
	<form id="picUploadForm" action="upload" method="post" enctype="multipart/form-data">
		<div>
			<label for="picFile"></label>
			<input  type="file" name="picFile" id="picFile" style="width:300px">
		</div>
		<div>
			<input class="easyui-btn" id="picUploadBtn" type="button" value="上传" />
		</div>
	</form>
</div>

<script type="text/javascript" src="editor_config.js"></script>
<script type="text/javascript" src="editor_all.js"></script>

<script>
    //渲染富文本编辑器
    var ue = UE.getEditor('desc');
    //设置初始高度，清空初始内容
    ue.ready(function(){
    	ue.setHeight(180);
    	ue.setContent("");
	});
</script>
<script type="text/javascript">
	var itemAddEditor ;
	//页面初始化完毕后执行此方法
	$(function(){
		//创建富文本编辑器
		// itemAddEditor = Buy.createEditor("#itemAddForm [name=desc]");
		//初始化类目选择和图片上传器
		Buy.init({fun:function(node){
			//根据商品的分类id取商品 的规格模板，生成规格信息。第四天内容。
			//Buy.changeItemParam(node, "itemAddForm");
		}});
	});
	//提交表单
	function submitForm(){
		//有效性验证   象征性做了一个简单的提示
		if(!$('#itemAddForm').form('validate')){
			$.messager.alert('提示','表单还未填写完成!');
			return ;
		}
		//取商品价格，单位为“分”
		$("#itemAddForm [name=price]").val(eval($("#itemAddForm [name=priceView]").val()) * 100);
		//我们将富文本编辑器的内容同步到textarea中：
		$("#desc").val(ue.getContent());
		//ajax的post方式提交表单
		//$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串
		$.post("/item/save",$("#itemAddForm").serialize(), function(data){
			if(data.status == 200){
				$.messager.alert('提示','新增商品成功!');
			}else{
				$.messager.alert('提示','新增商品失败!');
			}
		});
	}
	
	function clearForm(){
		$('#itemAddForm').form('reset');
		itemAddEditor.html('');
	}

	//页面一加载就给上传图片的按钮后面添加一个div，用来存放回显的图片
	$("#uploadPicBtn").siblings("div.pics").remove();
	$("#uploadPicBtn").after('<div class="pics"><ul></ul></div>');

	//给上传图片的按钮绑定事件
	$(".stFileupload").unbind("click").click(function(){
		var _ele = $(this);//上传图片的按钮
		//弹出一个窗体，在窗体中进行图片上传。
		$("#fileUploadWin").window({
			width:500,
			height:200,
			modal:true,
			collapsed:false
		}).window('open');
		//将窗体中的DIV显示出来
		$("#fileUploadWin").css("visibility","visible");
		//给提交表单的按钮添加事件
		$("#picUploadBtn").unbind('click').click(function(){
			var formData = new FormData();
			//这里的picFile要和controller中的形参名字一致，如果不一致，就要使用@RequestParam标注
			formData.append("picFile",$("#picFile")[0].files[0]);
			$.ajax({
				url:"upload",
				type:"post",
				data:formData,
				processData:false,// 数据不做处理
				contentType:false,// 不要设置Content-type
				success:function(res){
					// alert(res);//这里的res就是我们要图片地址
					//回显图片
					_ele.siblings(".pics").find("ul").append("<li><a href='"+res+"' target='_blank'><img src='"+res+"' width='80' height='50' /></a></li>");
					//将图片地址加入影藏域
					var imageField = $("#image");
					if(imageField.val()==''){
						imageField.val(res);
					}else{
						imageField.val(imageField.val()+";"+res);
					}
					//重置表单
					$("#picUploadForm").form("reset")
					//关闭窗体
					$("#fileUploadWin").window('close');
				}
			});
		});
	});
</script>
